<template>
  <a-row type="flex" justify="space-around" align="middle" class="header-content">
    <!-- 语言选择器 -->
    <a-col :span="14">
      <QLanguageSelect :bordered="false" style-type="white" ></QLanguageSelect>
    </a-col>
    <a-col :span="10">
      <a-row type="flex" justify="space-around" align="middle">
        <a-col id="headerContentPopoverNode">
          <!-- 头像 -->
          <a-popover
            placement="bottom" trigger="click"
            overlayClassName="header-content-popover"
            :getPopupContainer="(triggerNode) => triggerNode.parentNode">
            <!-- 个人设置 -->
            <template #content>
              <div class="header-content-popover-div">
                <a-row
                  type="flex"
                  justify="start"
                  align="middle"
                  @click="toSelfManage"
                  class="header-content-menu">
                  <component :is="'setting-outlined'" class="header-content-popover-div-icon"/>
                  <span>{{ $t('layout.basicLayout.selfManage') }}</span>
                </a-row>
                <a-row
                  type="flex"
                  justify="start"
                  align="middle"
                  @click="toSelfManage"
                  class="header-content-menu">
                  <component :is="'form-outlined'" class="header-content-popover-div-icon"/>
                  <span>{{ $t('layout.basicLayout.emailMe') }}</span>
                </a-row>
                <a-row
                  type="flex"
                  justify="start"
                  align="middle"
                  @click="openDialog"
                  class="header-content-menu">
                  <component :is="'logout-outlined'" class="header-content-popover-div-icon"/>
                  <span>{{ $t('layout.basicLayout.signOut') }}</span>
                </a-row>
              </div>
            </template>
            <a-avatar class="header-content-avatar">
              <template #icon>
                <UserOutlined />
              </template>
            </a-avatar>
          </a-popover>
        </a-col>
      </a-row>
    </a-col>
    <a-modal
      v-model:visible="visible"
      :title="$t('layout.basicLayout.warning')"
      @ok="toSignOut"
      :destroyOnClose="true"
      width="300px"
      :centered="true"
      :okText="$t('layout.basicLayout.confirm')"
      :cancelText="$t('layout.basicLayout.cancel')"
    >
      <p>{{ $t('layout.basicLayout.signOutMsg') }}</p>
    </a-modal>
  </a-row>
</template>

<script>
import QLanguageSelect from '@/components/QLanguageSelect/QLanguageSelect'
import { UserOutlined } from '@ant-design/icons-vue'
export default {
  name: 'HeaderContent',
  components: {
    QLanguageSelect,
    UserOutlined
  },
  data () {
    return {
      visible: false
    }
  },
  methods: {
    openDialog () {
      this.visible = true
    },
    toSelfManage () {
      this.$router.push({
        path: '/defaultPage/self'
      })
    },
    toSignOut () {
      this.visible = false
      this.$store.dispatch('login/login')
    }
  }
};
</script>

<style lang="less" scoped>

  :deep(.header-content-popover) {
    min-width: 135px!important;
    width: auto;
    padding: 12px 8px;
    .header-content-avatar {
      background-color: #639d4b !important;
      cursor: pointer;
      &:hover {
      }
    }
    .ant-popover-inner-content {
      padding: 8px 8px;
    }
  }
  .header-content-popover-div {
    font-size: 15px;
    font-weight: 600;
    width: max-content;
    white-space: pre;
    .header-content-menu {
      cursor: pointer;
      padding: 5px 10px;
      width: auto;
      white-space: pre;
      &:hover{
        color: #0077aa;
        border-radius: 5px;
        background: rgb(241,243,253);
      }
      .header-content-popover-div-icon{
        margin-right: 8px;
      }
    }
  }
</style>
